<template>
  <div>
    <icon :style="{ color: 'hotpink' }">
      <template #component>
        <svg
          t="1729090149740"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="14988"
          width="18"
          height="18"
        >
          <path
            d="M902.4 121.6c-51.2-51.2-121.6-76.8-192-76.8s-140.8 25.6-192 76.8l-396.8 390.4c-108.8 108.8-108.8 281.6 0 384 51.2 51.2 121.6 76.8 192 76.8s140.8-25.6 192-76.8l396.8-384c51.2-51.2 76.8-121.6 76.8-192 0-76.8-25.6-147.2-76.8-198.4z"
            fill="#F5B017"
            p-id="14989"
            data-spm-anchor-id="a313x.search_index.0.i24.3ba53a81bnMUkT"
            class="selected"
          ></path>
          <path
            d="M304 332.8l-182.4 179.2c-108.8 108.8-108.8 281.6 0 384 51.2 51.2 121.6 76.8 192 76.8s140.8-25.6 192-76.8l182.4-176-384-387.2z"
            fill="#FFC4A9"
            p-id="14990"
            data-spm-anchor-id="a313x.search_index.0.i25.3ba53a81bnMUkT"
            class="selected"
          ></path>
          <path
            d="M848 201.6c-6.4 6.4-22.4 9.6-28.8 3.2-32-32-70.4-44.8-108.8-44.8-44.8 0-83.2 19.2-108.8 44.8l-121.6 128c-12.8 8-22.4 8-32 0-6.4-6.4-6.4-19.2 0-25.6l128-128c38.4-38.4 83.2-57.6 140.8-57.6 51.2 0 94.4 16 132.8 54.4 6.4 11.2 4.8 19.2-1.6 25.6z"
            fill="#FFFFFF"
            p-id="14991"
          ></path>
        </svg>
      </template>
    </icon>
  </div>
</template>

<script setup lang="ts">
import Icon from '@ant-design/icons-vue'
</script>

<style lang="less" scoped>
.custom-icons-list :deep(.anticon) {
  margin-right: 6px;
}
</style>
